<template>
  <div class="cloud_shop_reward_center">
    <c-title :hide="false" text="奖励中心"></c-title>
    <van-tabs v-model="active" title-active-color="#F15353" line-width="20px" @change="tabChange">
      <van-tab :title="`进行中（${running_activity_count}）`" name="1"></van-tab>
      <van-tab :title="`预告（${expect_activity_count}）`" name="2"></van-tab>
      <van-tab title="结束" name="3"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="lis" v-for="(item, index) in dataList" :key="index">
        <img :src="item.top_pic_url" class="lis_img" alt="" />
        <div class="title_box">
          <div class="tag">{{ item.type == 1 ? "满返活动" : "冲刺活动" }}</div>
          <span class="title">{{ item.name }}</span>
        </div>
        <div class="time-count">
          <div class="time-count-span" v-if="nowTime > item.end_time">已结束</div>
          <template v-else>
            <div class="time-count-span">{{ nowTime > item.start_time ? "距结束" : "距开始" }}</div>
            <van-count-down :time="nowTime > item.start_time ? (item.end_time - nowTime) * 1000 : (item.start_time - nowTime) * 1000">
              <template #default="timeData">
                <span class="block">{{ timeData.days < 10 ? "0" + timeData.days : timeData.days }}</span>
                <span class="colon">天</span>
                <span class="block">{{ timeData.hours < 10 ? "0" + timeData.hours : timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes < 10 ? "0" + timeData.minutes : timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds < 10 ? "0" + timeData.seconds : timeData.seconds }}</span>
              </template>
            </van-count-down>
          </template>
        </div>

        <div class="Progress" v-if="item.type == 1 && item.step_list">
          <div class="line">
            <div class="line_l">额外奖励（预计）</div>
            <div class="line_r">
              <div class="txt" v-for="(items, index) in item.step_list" :key="index">{{ $i18n.t("money") }}{{ items.reward_amount }}</div>
            </div>
          </div>
          <div class="progress_line">
            <div class="prog">
              <div class="round" v-for="(items, index) in item.step_list" :key="index">
                <div class="round_l" v-if="items.is_reward" :class="{ round_l_w: item.step_list.length > 1 ? (item.step_list[index + 1]?item.step_list[index + 1].is_reward:'') : items.is_reward }"></div>
                <div class="circle"></div>
              </div>
            </div>
          </div>
          <div class="line">
            <div class="line_l">销售件数（预计）</div>
            <div class="line_r">
              <div class="txt" v-for="(items, index) in item.step_list" :key="index">{{ items.goods_count }}件</div>
            </div>
          </div>
        </div>
        <div class="rank" v-if="item.type == 2">
          <div class="rank_l">排名（预计）</div>
          <div class="rank_r">{{ item.rank }}</div>
        </div>
        <div class="lis_bottom">
          <div class="lis_bottom_l">
            预计奖励 <span class="price">{{ $i18n.t("money") }}{{ item.expect_reward_amount }}</span>
          </div>
          <div class="lis_bottom_r" @click="toDetail(item)">查看详情</div>
        </div>
      </div>
      <van-empty image="search" description="暂无更多" v-if="dataList.length == 0" />
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 1,
      page: 1,
      total_page: 0,
      isloadMore: true,
      dataList: [],
      nowTime: "",
      running_activity_count: 0,
      expect_activity_count: 0
    };
  },
  activated() {
    this.nowTime = Date.parse(new Date()) / 1000;
    console.log(this.nowTime);
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.dataList = [];
    },
    tabChange() {
      this.init();
      this.getData();
    },
    async getData() {
      let json = {
        time_type: this.active
      };
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.activity.activityList", json, "");
      if (result) {
        this.dataList = data.data;
        this.total_page = data.last_page;
        this.isloadMore = true;
        this.running_activity_count = data.running_activity_count;
        this.expect_activity_count = data.expect_activity_count;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          time_type: this.active
        };
        let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.activity.activityList", json, "");
        if (result) {
          this.dataList = this.dataList.concat(data.data);
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    },
    toDetail(item) {
      this.$router.push(this.fun.getUrl("full_Return_Details", { id: item.id }));
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  padding: 0.63rem 0.75rem;
  box-sizing: border-box;
  .lis {
    padding: 0.5rem 0.5rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 0.63rem;
    .rank {
      padding: 0.63rem;
      box-sizing: border-box;
      background: #fff5f5;
      border-radius: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .time-count {
      display: flex;
      align-items: center;
      margin: 0.5rem 0 0.63rem 0;
      .time-count-span {
        font-weight: 500;
        font-size: 0.75rem;
        margin-right: 0.34rem;
      }
      .colon {
        font-weight: 500;
        font-size: 0.81rem;
        color: #f15353;
        margin: 0 0.25rem;
      }
      .block {
        color: #f15353;
        padding: 0.19rem;
        box-sizing: border-box;
        border-radius: 0.38rem;
        background: #feeded;
      }
    }
    .title_box {
      font-size: 0.94rem;
      box-sizing: border-box;
      text-align: left;
      .tag {
        background: #f96d20;
        padding: 0.2rem;
        display: inline-block;
        box-sizing: 0.3rem;
        border-radius: 0.38rem;
        color: #ffffff;
        margin-right: 0.38rem;
      }
      .title {
        font-size: 0.94rem;
        text-align: left;
        font-weight: bold;
      }
    }
    .lis_img {
      margin: 0;
      width: 100%;
      height: 8.13rem;
      object-fit: cover;
      background: #ffe9e9;
      border-radius: 0.5rem;
    }
    .lis_bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.75rem;
      .lis_bottom_l {
        font-weight: bold;
        font-size: 0.88rem;
        .price {
          color: #f15353;
        }
      }
      .lis_bottom_r {
        font-weight: 500;
        font-size: 0.75rem;
        color: #f15353;
        padding: 0.5rem 0.63rem;
        box-sizing: border-box;
        border-radius: 1.03rem;
        border: 0.03rem solid #f15353;
      }
    }
  }
}

// 进度条
.Progress {
  margin-top: 0.63rem;
  background: rgba(241, 83, 83, 0.06);
  padding: 0.78rem 0.63rem;
  padding-right: 0.78rem 0.63rem;
  border-radius: 0.5rem;
  .progress_line {
    padding-left: 6.5rem;
    height: 0.19rem;
    border-radius: 0.09rem;
    margin: 0.5rem 0;
    .prog {
      width: 100%;
      height: 100%;
      background: #fbc4c4;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .round {
        flex: 1;
        display: flex;
        justify-content: center;
        position: relative;
        .circle {
          width: 0.5rem;
          height: 0.5rem;
          background: #ffffff;
          border: 2px solid rgba(241, 83, 83, 0.3);
          border-radius: 50%;
          position: relative;
        }
      }
      .round_l {
        width: 50%;
        height: 0.19rem;
        position: absolute;
        left: 0;
        top: 0.12rem;
        background: red;
        border-radius: 0.09rem;
      }
      .round_l_w {
        width: 100% !important;
      }
    }
  }
  .line {
    display: flex;
    align-items: center;
    font-size: 0.81rem;
    .line_l {
      flex-shrink: 0;
    }
    .line_r {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .txt {
        width: calc(100% / 3);
        font-weight: 500;
        font-size: 0.81rem;
        color: #00001c;
      }
    }
  }
}
</style>
